<script setup lang="ts" name="list">
import { reactive, onMounted,nextTick,ref } from 'vue'
import { useLoadingBar  } from 'naive-ui'
import { useAppStore } from '@/store'
import { CameraOutline,Close,HeartSharp,LogoYoutube,ChevronDown,ArrowRedoCircle,ArrowUndoCircle,HeartOutline } from '@vicons/ionicons5'
import { _mylike,_detail,_reset } from '@/api/api'
import { useRequest } from 'alova'
import { IPC } from 'root/common/constants'
import DPlayer from 'dplayer'
import { useRouter } from 'vue-router'
import { time_format } from '@/utils/comm'
const router = useRouter();
 
const setWindows = async (e:String) => {
  try {
    await window.ipcRenderer.invoke(IPC.ELECTRON_WINDOWS, e)
  } catch (error: any) {
    console.log('setWindows', error.message)
  }
}

function close_small(){
  if(dp2){ dp2.destroy();}
  setWindows('close_small');
}

function set_cover(video_id:any){
  useRequest(_reset.reset_video_cover({
    id: video_id,
    fps:time_format(dp2.video.currentTime)   
  }))
  dp2.notice("设为封面"+time_format(dp2.video.currentTime), 2000)
}

function show_more(){
  data.show_1 = data.show_1?false:true
  if(data.show_1){
    setWindows('small_down');
  }else{
    setWindows('small_up');
  }
}

function play(){
  data.comic_auto = data.comic_auto?false:true
  if(data.list.type==1){
    if(data.comic_auto){
      data.timer = setInterval(() => {
        img_list.value.scrollTo({
          top: data.move_h+200,
          left: 0,
          behavior: "smooth"
        })
    }, 1000);
    }else{
      clearInterval(data.timer)
    }
  }else{
    clearInterval(data.timer)
    dp2.toggle()
  }
   
}

const store = useAppStore()
const loadingBar = useLoadingBar()
loadingBar.start()

const data =  reactive({
  loading: false,
  tags: [] as any[],
  list: {
    id:"",
    cover:"",
    name:"",
    fav_state:0,
    url:"",
    video_id:"",
    type:0,
    comic_ep:'',
    comic_eps:[] as any,
  },
  comic_ep_selected:"",
  pge:1,
  cnt:1,
  type:3,
  ord:3,
  key:"",
  alls:0,
  scrolltop:0,
  innerWidth:800,
  show_1:false,
  playing:false,
  playtime:0,
  play_now:'',
  play_all:'',
  value:0,
  video_col:false,
  speed:'1.0',
  pid:'1' as any,
  pge_all:1,
  odr:'desc' as any,
  move_h:0,
  bfb:0,
  img_list:[],
  comic_auto:false,
  now:0,
  timer:null as any
});

const ep_selected = (ep_id:any) => {
    if(data.comic_ep_selected == ep_id){
      return;
    }
    data.comic_ep_selected = ep_id
    const { onSuccess }  = useRequest(_detail.comic_dtl({
      id: ep_id, 
    }))
    onSuccess((res:any) => {
      img_list.value.scrollTo(0,0)
      data.img_list = res.data.img_lst
    }); 
}

const img_list = ref<any>({});
const get_max = () => {
  nextTick(()=>{
    max.value = innerRef.value!.clientHeight-600
  })
}
const innerRef = ref<HTMLDivElement>()
const max = ref(0)
const value = ref(0)

const inputSlider2 = (value: number) => {
  img_list.value.scrollTo({
      top: value,
      left: 0,
      //behavior: "smooth"
    })
}
const scroll = (event:any) => {
   value.value = event.target.scrollTop
   data.move_h = event.target.scrollTop
   data.bfb = Math.ceil(value.value/max.value*100)
   if(data.bfb>100){
    data.bfb=100
   }
   get_max()
}

async function on_refresh(){
  data.loading = true
  data.value = 0
  data.speed = '1.0'
  await get_list()
}

async function page_next(pge:any){
  if(data.pge==data.pge_all&&pge>0){
    dp2.notice("已经到底啦", 2000)
    return
  }
  if(data.pge==1&&pge<0){
    dp2.notice("已经到顶部啦", 2000)
    return
  }
  data.pge=data.pge+pge
  on_refresh()
}
 
async function get_list() {  
  data.loading = false;
  loadingBar.start()
  const { onSuccess }  = useRequest(_mylike.mylike_list({
    pge: data.pge,
    cnt: data.cnt,
    pid:data.pid, 
    odr:data.odr
  }))
  onSuccess((res:any) => {
    data.list = res.data.list[0] 
    data.pge_all = res.data.pge_all
    if(data.list.type==1){//漫画
      if(dp2){ dp2=null;}
      ep_selected(data.list.comic_ep)
    }else{//视频
      clearInterval(data.timer)
      show_video_d()
    }
    setTimeout(() => {
      loadingBar.finish()
    }, 200)
  });
}

async function on_fav(id:any,type:any){
      const { onSuccess }  = useRequest(_detail.fav_add({
        comic_id: id, 
        type: type 
      }))
      onSuccess((res:any) => {
        if(dp2){dp2.notice(res.data.message, 2000)}
        data.list.fav_state = res.data.fav_state
      });  
}

let dp2: any;
async function show_video_d() {
    if(dp2){
      dp2.switchVideo(
          {
              url: data.list.url,
          }
      );
    }else{
      dp2 = new DPlayer({
        container: document.getElementById("video"),
        autoplay: false,
        screenshot:false,
        preload: 'auto',
        airplay: true,
        loop:true,
        volume: 0,
        hotkey:false,
        mutex: true, //单1播放
        preventClickToggle:true,
        video: {
          url: data.list.url,
        },
        theme: store.thems?.primary,
        controls:false
      });
    }
   
    dp2.speed(data.speed)
    dp2.play();
    dp2.on('playing', function () {
      data.playing = true
    });
    dp2.on('timeupdate', function () {
      data.play_now = time_format(dp2.video.currentTime) 
      data.play_all = time_format(dp2.video.duration) 
      data.playtime= Math.ceil(dp2.video.currentTime/dp2.video.duration*100)
      data.value = data.playtime
    });
    dp2.on('pause', function () {
      data.playing = false
    });
    dp2.on('error', function () {
      dp2.notice("开始转码请稍后再播放", 2000)
      // useRequest(_reset.reset_video({
      //   id: data.list.video_id,   
      // }))
      //视频加载出错,自动跳转下一个视频
      //page_next(1)
    });
}

const inputSlider = (value: number) => {
  data.value = value
  dp2.seek(dp2.video.duration/100*value);
}
 
onMounted(() => {
  if(router.currentRoute.value.query.pid){
    data.pid = router.currentRoute.value.query.pid
    data.odr = router.currentRoute.value.query.odr
  }
  on_refresh()
}); 
</script>

<template>
  <div class="page_list  on_move">
    <n-space class="windows-bar ">
      <n-icon size="20" class="button-item on_nomove xiaoshou" @click="close_small()"><Close /> </n-icon>
      <n-icon size="20" :class="[data.show_1?'refreshIcon180':'refreshIcon0']" class="xiaoshou button-item on_nomove" @click="show_more">
        <ChevronDown /> 
      </n-icon>
    </n-space>
    
    <div class="video" v-show="data.list.type!=1">
      <div :class="[data.show_1?'video_big':'video_small']" class="on_nomove">
        <div id="video" :class="[data.show_1?'video_big2':'video_small2']" ></div>
      </div>
      <div class="tx" v-show="data.show_1">
        <n-image
          lazy class="img"
          object-fit="cover" 
          :src="data.list.cover"
          :key="data.list.cover"
        />
        <div class="playing" v-if="data.playtime>0">
          <div style="color: #fff;font-size: 12px;">播放中{{data.play_now}}/{{data.play_all}}</div>
        </div>
      </div>
      <div class="title ">
        <div class="scrolling-text" :key="data.list.name"><span>{{data.pge}}.{{data.list.name}}</span></div>
        <div class="btn" style="margin-left: 0px;">
 
          <n-icon size="20"  v-if="data.list.fav_state==1" :color="store.thems?.primary" class="btn-item on_nomove" @click="on_fav(data.list.video_id,data.list.type)"><HeartSharp /> </n-icon>
          <n-icon size="20"  v-else class="btn-item on_nomove" @click="on_fav(data.list.video_id,data.list.type)"><HeartOutline /> </n-icon>
          <n-icon size="20" class="btn-item on_nomove" @click="play"><LogoYoutube /> </n-icon>
          <div style="width: 80px;margin:1px 5px;;" class="on_nomove">
            <n-slider v-model:value="data.value"  :on-update:value="inputSlider" :tooltip="false">
              <template #thumb>
                <n-icon-wrapper :size="24" style="width: 30px;height: 16px;">
                  <span style="font-size: 9px;color: #fff;">{{data.play_now}}</span>
                </n-icon-wrapper>
              </template>
            </n-slider>
          </div>
          <n-icon size="20"  class="btn-item on_nomove" @click="page_next(-1)"><ArrowUndoCircle /> </n-icon>
          <n-icon size="20"  class="btn-item on_nomove" @click="page_next(1)"><ArrowRedoCircle /> </n-icon>
          <n-icon size="20" v-if="data.list.type==3" class="btn-item on_nomove" @click="set_cover(data.list.video_id)"><CameraOutline /> </n-icon>

          
          
        </div> 
      </div>
    </div>

    <div class="video" v-show="data.list.type==1">
      <div class="tx" style="width: 35px;">
        <n-image lazy class="img" object-fit="cover" style="width: 30px;" :src="data.list.cover" :key="data.list.cover"/>
      </div>
      <div class="title" style="width: 245px;">
        <div class="scrolling-text" :key="data.list.name"><span>{{data.pge}}.{{data.list.name}}</span></div>
        <div class="btn" style="margin-left: 0px;">
 
          <n-icon size="20"  v-if="data.list.fav_state==1" :color="store.thems?.primary" class="btn-item on_nomove" @click="on_fav(data.list.video_id,data.list.type)"><HeartSharp /> </n-icon>
          <n-icon size="20"  v-else class="btn-item on_nomove" @click="on_fav(data.list.video_id,data.list.type)"><HeartOutline /> </n-icon>
          <n-icon size="20" class="btn-item on_nomove" @click="play"><LogoYoutube /> </n-icon>
          <div style="width: 150px;margin:2px 5px;;" class="on_nomove">
            <n-slider v-model:value="value"  :max="max"  :on-update:value="inputSlider2" :tooltip="false">
              <template #thumb>
                <n-icon-wrapper :size="24" style="width: 30px;height: 16px;">
                  <span style="font-size: 9px;color: #fff;">{{data.bfb}}%</span>
                </n-icon-wrapper>
              </template>
            </n-slider>
          </div>
          <n-icon size="20"  class="btn-item on_nomove" @click="page_next(-1)"><ArrowUndoCircle /> </n-icon>
          <n-icon size="20"  class="btn-item on_nomove" @click="page_next(1)"><ArrowRedoCircle /> </n-icon>
          
        </div> 
      </div>
    </div>
    <div style="width: 100%;margin-top: 5px;display: flex;" class="on_nomove" v-show="data.list.type==1&&data.show_1">
      <div class="comic_left" style="flex: 1;">
        <n-scrollbar style="height:180px;border-radius: 5px;" ref="img_list"  trigger="none"  :on-scroll="scroll"> 
          <div ref="innerRef">
            <div class="img_list" v-for="url in data.img_list">
              <img :src="url" style="width: 100%;" />
            </div>
          </div>
        </n-scrollbar>
      </div>
      <div class="comic_right" style="width: 60px;margin-left: 5px;">
        <n-scrollbar style="height:180px;padding-right: 5px;" > 
          <div v-for="item in data.list.comic_eps" class="ep_list xiaoshou" @click="ep_selected(item.id)" :style="item.id==data.comic_ep_selected?'background:'+store.thems?.primary+'':''">{{item.name}}</div>
        </n-scrollbar>
      </div>
      
    </div>
    
  

  </div>
</template>

<style lang="scss" scoped>
  .ep_list{
    padding:4px 2px;
    margin-bottom:3px;
    background:rgb(255,255,255,0.1);
    border-radius: 3px;
    text-align: center;
    font-size: 11px;
    color: #fff;
  }
  .page_list{
    width: 100%;
    height: 100%;
    padding: 5px;
  }

  .video{
    width: 100%;  
    display: flex;
    //border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    .tx{
      position: relative;
      width: 90px;
      .img{
        width: 85px;
        height: 50px;
        transition: all 0.4s;
        border-radius: 3px;
        animation: flipInY;
        animation-duration: 0.5s;
      }
      .playing{
        position: absolute;
        left: 0;
        top:0;
        width: 90px;
        height: 50px;
        background-color: rgba(#000, 0.4);
        text-align: center;
        display: flex;
        justify-content: center;
        border-radius: 3px;
        align-items: center;
      }
    }
    .title{
      width: 200px;
      margin-left: 10px;
      font-size: 16px;
      .btn{
        margin-top: 5px;
        cursor: pointer;
        display: flex;
        .btn-item{
          margin-right: 5px;
          transition: all 0.4s;
        }
        .btn-item:active{
          animation: rubberBand;animation-duration: 0.5s;
        }
        .btn-item:hover{
          transform: scale(1.3,1.3); 
        }
        
      }
      
      
    }
  }
  .windows-bar{
    position: fixed;
    top:0;
    right: 0;
    padding: 3px;
    width: 30px;
  }
  .video_col{
    position: relative;
    bottom: 30px;
    width: 100%;
    margin: auto;
    height: 30px;
    background-color: transparent;
    backdrop-filter: blur(20px);
    // border-right: 2px solid rgba(255, 255, 255, .2);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    padding: 5px 10px;
  }

  .video_col2{
    position: relative;
    bottom: 208px;
    left: 5px;
    width: 50px;
    height: 25px;
    border-radius: 5px;
  }
  .video_small{
    width: 90px;
    height:50px;
    border-radius: 5px;
    overflow: hidden;
  }
  .video_big{
    width: 320px;
    height:180px;
    border-radius: 5px;
    position: fixed;
    bottom:5px;
    overflow: hidden;
  }
  .video_small2{
    height:50px;
  }
  .video_big2{
    //width: 320px;
    height:180px;
  }
 
  :deep(.dplayer-menu) {
    display: none !important;
  } 
  :deep(.dplayer-mask) {
    display: none !important;
  } 
  :deep(.dplayer-controller) {
    display: none !important;
  } 
  :deep(.dplayer-controller-mask) {
    display: none !important;
  } 
 

 
  .light-mode { 
    .ep_list{
    background:rgba(19, 18, 18, 0.2);
  }
}
</style>


